<template>
  <el-container>
    <el-aside :width="asideWidth">
      <!-- 左侧导航栏 -->
      <h3 class="title-text">小U商城后台</h3>
      <!-- 添加router后, 可直接跳转到对应页面; 菜单的index属性必须和路由规则中的path属性 -->
      <el-menu
        router
        default-active="2"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
        background-color="#262A32"
        text-color="#fff"
        active-text-color="#ffd04b"
        :unique-opened="true"
        :collapse="isCollapse"
      >
        <el-menu-item index="/">
          <i class="el-icon-house"></i>
          <span>首页</span>
        </el-menu-item>

        <el-submenu v-for="item in menus" :key="item.id" :index="'top'+item.id">
          <template slot="title">
            <i :class="item.icon"></i>
            <span>{{item.title}}</span>
          </template>
          <el-menu-item v-for="val in item.children" :key="val.id" :index="val.url">{{val.title}}</el-menu-item>
        </el-submenu>

        <!-- <el-submenu index="1">
          <template slot="title">
            <i class="el-icon-setting"></i>
            <span>系统设置</span>
          </template>
          <el-menu-item index="/menu">菜单管理</el-menu-item>
          <el-menu-item index="/role">角色管理</el-menu-item>
          <el-menu-item index="/admin">管理员管理</el-menu-item>
        </el-submenu>

        <el-submenu index="2">
          <template slot="title">
            <i class="el-icon-shopping-bag-2"></i>
            <span>商城管理</span>
          </template>
          <el-menu-item index="/category">商品分类</el-menu-item>
          <el-menu-item index="/specs">商品规格</el-menu-item>
          <el-menu-item index="/goods">商品管理</el-menu-item>
        </el-submenu>-->
      </el-menu>
    </el-aside>
    <el-container>
      <el-header>
        <el-row>
          <el-col :span="2">
            <el-button @click="collapseToggle" type="primary" size="mini" icon="el-icon-s-fold"></el-button>
          </el-col>
          <el-col :span="3">
            <!-- 面包屑导航 -->
            <el-breadcrumb separator="/">
              <el-breadcrumb-item :to="{ path: '/' }">管理中心</el-breadcrumb-item>
              <el-breadcrumb-item>
                <a href="/">首页</a>
              </el-breadcrumb-item>
            </el-breadcrumb>
          </el-col>
          <el-col :span="1">
            <el-button icon="el-icon-back" size="mini" plain circle></el-button>
          </el-col>
          <el-col :offset="15" :span="3">
            <el-dropdown>
              <span class="el-dropdown-link">
                admin
                <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>全屏操作</el-dropdown-item>
                <el-dropdown-item>个人信息</el-dropdown-item>
                <el-dropdown-item>安全退出</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-col>
        </el-row>
      </el-header>
      <el-main>
        <!-- 二级路由出口: 二级路由匹配到的组件的渲染位置 -->
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
// 导入vuex
import { mapState, mapGetters, mapMutations } from "vuex";
export default {
  computed: {
    ...mapState(["isCollapse", "menus"]),
    ...mapGetters(["asideWidth"])
  },
  methods: {
    ...mapMutations(["collapseToggle", "menusInit"]),
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    }
  },
  created() {
    this.menusInit();
  }
};
</script>

<style>
.el-container {
  height: 100vh;
  min-width: 970px;
}
.el-menu-vertical-demo {
  height: calc(100vh - 60px);
  border: 0;
}
.el-menu-vertical-demo li {
  text-align: left;
}
/* 设置导航高亮样式 */
.el-menu-item.is-active {
  background: #409eff !important;
  color: #fff !important;
}

.el-header {
  background-color: #fff;
  color: #333;
  /* text-align: center; */
  display: flex;
  align-items: center;
}
.el-header .el-row {
  width: 100%;
}
.el-header .el-breadcrumb {
  line-height: 28px;
}
.el-aside {
  background-color: #d3dce6;
  color: #333;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

/* 侧边栏 */
.title-text {
  height: 60px;
  line-height: 60px;
  text-align: center;
  letter-spacing: 4px;
  font-weight: normal;
  background: #444;
  color: #fff;
}
</style>